<template>
  <div class="box">
    <a-upload
      :style="setstyle"
      name="avatar"
      listType="picture-card"
      class="avatar-uploader"
      :showUploadList="false"
      :customRequest="customUpload"
    >
      <div  v-if="filePathUrl" class="img-box">
        <img :style="setstyle" :src="imgShowUrl+filePathUrl" alt="" />
      </div>
      <div v-else>
        <a-icon :type="loading" />
        <div class="ant-upload-text">上传图片</div>
      </div>
    </a-upload>
  </div>
</template>

<script>
import { imgUpload } from './upload'
import baseapi from '@/api/base'

export default {
  name: 'ImgUpload',
  props: {
    uploadUrl: {
      default: baseapi.imgUploadUrl,
      required: false,
      type: String
    },
    appId: {
      default: baseapi.huiwcore_app,
      required: false,
      type: String
    },
    idno: {
      default: 'idno',
      required: false,
      type: String
    },
    imgShowUrl: {
      default: baseapi.imgShowUrl,
      required: false,
      type: String
    },
    placeholder: {
      default: '',
      required: false,
      type: String
    },
    setstyle: {
      default: 'max-width:200px;max-height:200px;',
      required: false,
      type: String
    },
    value: {
      default: '',
      required: false,
      type: String
    }
  },
  data () {
    return {
      loading: 'plus',
      dictOptions: [],
      uploadHeaders: {},
      filePathUrl: this.value,
      imgShowPathUrl: ''
    }
  },
  created () {
    // this.initDictData()
  },
  methods: {
    beforeUpload () {
    },
    handleChange (val) {
    },
    customUpload (option) {
      console.log(option);
      const _this = this
      // const fileUrl = this.uploadUrl
      const formData = new FormData()
      formData.append('appId', _this.appId)
      formData.append('idno', _this.idno)
      formData.append('fileTitle', option.file.name)
      formData.append('file', option.file)
      new Promise((resolve) => {
        _this.loading = 'loading'
        resolve(imgUpload(formData, {}))
      }).then((res) => {
        if (res && res.code && res.code === 'C1' && res.data) {
          console.log(11111);
          this.$emit('change', res.data.fullUrl)
          // _this.filePathUrl = _this.imgShowUrl + res.data.thumbnailUrl
        }else{
          this.filePathUrl = ''
          this.$emit('change', '')
          this.$message.error({content:'上传出错，请检查图片格式'})
        }
      }).catch(() => {
        this.filePathUrl = ''
        this.$emit('change', '')
        this.$message.error({content:'上传出错，请检查图片格式'})
      }).finally(() => {
        _this.loading = 'plus'
      })
    }
  },
  watch: {
    value: function () {
      this.filePathUrl = this.value
    }
  }
}
</script>
<style lang="less" scoped>
  .box {
    min-height: 140px !important;
    margin: 5px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
